<template>
  <view class="content">
    <view class="qrcode">
      <uqrcode ref="uQRCode" :mode="mode" :text="text" :size="size" :margin="margin" :background-color="backgroundColor" :foreground-color="foregroundColor" :error-correct-level="errorCorrectLevel" :type-number="typeNumber" :file-type="fileType"></uqrcode>
    </view>

    <button class="button" @click="toTempFilePath('uQRCode')" v-if="mode==='canvas'">导出临时文件路径</button>
    <button class="button" type="primary" @click="save('uQRCode')" v-if="mode==='canvas'">保存</button>
    <text class="text" v-if="mode==='view'">view模式不支持导出文件，只能通过截屏方式保存</text>
  </view>
</template>

<script>
  import uQRCode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/common/uqrcode'

  export default {
    data() {
      return {
        mode: 'canvas',
        text: `uQRCode 3.0.0 更新时间：2021-12-30 预览时间：${new Date()}`,
        size: 256,
        margin: 10,
        backgroundColor: '#FFFFFF',
        foregroundColor: '#000000',
        errorCorrectLevel: uQRCode.errorCorrectLevel.H,
        typeNumber: -1,
        fileType: 'png',
        defaultErrorCorrectLevel: uQRCode.errorCorrectLevel,
        qrcodeList: ['我是第一个', '我是第二个', '我是第三个']
      }
    },
    onLoad(option) {
    },
    methods: {
      toTempFilePath(id) {
        uni.showLoading({
          mask: true,
          title: '请稍后...'
        })
        this.$refs[id].toTempFilePath({
          success: res => {
            console.log(res)
            uni.hideLoading()
            uni.showToast({
              icon: 'none',
              title: '文件临时路径：' + res.tempFilePath
            })
          },
          fail: err => {
            uni.hideLoading()
            uni.showToast({
              icon: 'none',
              title: JSON.stringify(err)
            })
          }
        })
      },
      save(id) {
        uni.showLoading({
          mask: true,
          title: '请稍后...'
        })
        this.$refs[id].save({
          success: res => {
            console.log(res)
            uni.hideLoading()
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          },
          fail: err => {
            uni.hideLoading()
            uni.showToast({
              icon: 'none',
              title: JSON.stringify(err)
            })
          }
        })
      },
      saveBatch() {
        this.$refs.batchQRCode.forEach((ref, index) => {
          setTimeout(() => {
            ref.save({
              success: res => {
                uni.showToast({
                  icon: 'none',
                  title: `${res.msg} (${index + 1})`
                })
              }
            })
          }, index * 500)
        })
      },
      sliderChange(e, dataName) {

        this.$set(this.$data, dataName, e.detail.value)
      }
    }
  }
</script>

<style>
  .content {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 32rpx;
  }

  .qrcode {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 750rpx;
    padding: 32rpx 0;
    background-color: #F0F0F0;
  }

  .title {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    margin: 32rpx 0;
    font-size: 36rpx;
    color: #F0F0F0;
  }

  .text {
    margin-top: 32rpx;
    font-size: 32rpx;
    color: #F0F0F0;
  }

  .form {
    width: 686rpx;
    padding: 32rpx;
  }

  .slider {
    margin-left: 0;
    margin-right: 0;
  }

  .button {
    width: 690rpx;
    margin-top: 32rpx;
	background-color: #3cb371;
	color: #F0F0F0;
  }

  .qrcode-box {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
</style>
